import React, {useState} from 'react'
import { Card } from 'antd'
import ReactEcharts from 'echarts-for-react'
import TypeStyle from './../type/type.module.scss'


export default function Echarts1() {
  const [option] = useState({
    xAxis: {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
      axisLine:{
        show: false
      },
      axisTick:{
        show: false
      },
      splitLine : {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine : {
        show: false
      }
    },
    series: [
      {
        data: [120, 200,130,150, 80, 70, 110, 130,240,230,100,180],
        type: 'bar',
        itemStyle:{
          color: '#f1c40f',
          borderRadius: [10,10,0,0]
        },
        barMaxWidth: 10
      },
      {
        data: [180,100,230,240,130,110,70,90,150,130,140,200],
        type: 'bar',
        itemStyle: {
          color: '#ff6700',
          borderRadius: [10,10,0,0]
        },
        barMaxWidth: 10,
        barGap: '40%'
      }
    ]
  })
  return (
    <Card className={`${TypeStyle.card}`} title="销售对比图" size='small'>
      <ReactEcharts className={TypeStyle.echarts} option={option}></ReactEcharts>
    </Card>
  )
}
